干货丨Ant Design 全面解析 (一)

      欢迎关注「长弓小子」

    我们都是为梦想一起努力的人

Ant Design 是蚂蚁金服体验技术部推出的一种服务于企业及产品的设计体系，基于「自然」、「确定性」、「意义感」、「生长性」这四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

   全文共 2612 字 4 图，阅读需要 7 分钟

什么是 Ant Design

随着商业化发展的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。企业级产品往往是庞大且复杂的系统，项目模块数量多，功能复杂，迭代频繁，常常需要设计者与开发者能快速做出响应。而这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。基于这一背景，蚂蚁金服体验技术部打磨出了Ant Design，作为一种服务于企业及产品的设计体系，提供完善的设计指引、实践案例、设计资源和设计工具，来帮助设计者快速产出高质量产品原型。

随着不断的完善与打磨，Ant Design已经远不止是一个 UI 组件库，也诞生了数据可视化资产（AntV）、插画资产（海兔），以及体验设计、增长设计、品牌设计等各种策略工具。

Ant Design 核心功能

Ant Design和由Google开发的Material Design（可阅读文章：干货丨Material Design 全面解析 (一) 进行了解）有相同之处，二者都从设计的角度思考，推出一套设计语言来规范开发者和设计者的工作；二者的目标都是要建立相对底层的系统，设定了设计的底线，基于此规范建立的系统拥有相对一致的表现样式而且不会很难看。

基于蚂蚁中台的设计经验，Ant Design总结了包括色彩、字体、布局、图标、阴影、暗黑模式在内的全局样式；以及包括表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面典型解决方案；提出了行之有效的设计原则；并提供可视化数据分析和图形化制作等设计工具，帮助设计者和开发者快速构建界面。Ant Design核心功能如下图所示：

Ant Design 设计价值观

Ant Design的设计价值观意在为设计者提供评价设计好坏的标准，为Ant Design提供设计原则和设计模式，进而为具体设计问题提供向导和解决方案。设计价值观包括四点：自然、确定性、意义感、生长性。

      自然     

产品功能日益复杂，而人的意识和注意力资源有限，Ant Design想让用户在无意识的条件下更自然、顺畅的使用产品：

• 感知自然：界面设计中的视觉要素包括布局、文字、色彩、插画、图标等，应考虑主次和逻辑，易于理解，降低用户认知成本，带来流畅的使用体验。在一些场景下，适时加入听觉、触觉等其它感知通道，能创造更丰富自然的产品体验。

• 行为自然：设计者应充分理解用户、系统角色、任务目标间的关系，场景化组织系统功能和服务，同时辅以数据收集、用户行为分析、人工智能、传感器、元数据等策略和方法，提供主动式交互，帮助用户决策、减少操作，从而节约用户脑力和体力，让人机交互行为更自然。常见的主动式交互可以分成以下两种类型：

• 相逢不相识：系统主动式交互，由于不是用户有意识触发的，所以用户能看到发生的变化，但不一定明白变化背后的逻辑。举个例子：在使用支付宝的收款码时，当你的设备旋转达到一定角度之后，界面会自然翻转。此时对面的人通过扫一扫，就以正面看到自己付款的界面及反馈。

• 可用不可见：系统主动式交互，用户看不到变化，可能也从没意识到有这个交互。举个例子：iOS的键盘会根据你的上一个动作，主动调整每个字母的点击热区。如输了Ant Desig之后，那么 n 出现的可能性会大于旁边的 b 和 m，让你更容易点击。这一切非常自然，自然到用户完全意识不到它的存在。

      确定性      

在追求自然交互基础上，通过Ant Design创造的产品界面应是高确定性、低合作成本的状态。

• 设计者确定：设计者指的是各企业中设计师和开发人员。Ant Design通过探索设计规律，模块化设计思路，来为设计者提供足够精简的设计规则、组件、模式等，赋能设计者、降低设计和开发的难度。

• 保持克制：聚焦在最有价值的产品功能打磨，并用尽可能少的设计元素将其表达。完美不在于无以复加，而在于无可删减。

• 提炼对象： 探索设计规律，并将规律抽象成对象，增强界面设计的灵活性和可维护性，同时也减少设计者的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版有固定的搭配。

• 模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性，节约无谓的设计时间且保持系统一致性。

• 用户确定：用户日常工作是通过诸多企业级产品的协同来完成的，除了考虑单一产品的设计一致性，更应当在跨产品、跨终端、跨系统间保持良好的确定性。一致的外观和交互，保持面向用户的熟悉感，能提升易学性，降低认知和操作成本，提升工作效率。

      意义感      

意义感体现在两个方面：一是产品设计应充分站在用户视角，每一个功能和元素都有存在的价值，每一次用户操作都能得到有意义的反馈，促成用户工作顺利完成；二是在自然、确定之上，兼顾用户的人性需求，为工作过程创造富有意义感的人机交互：

• 结果的意义：明确目标，即时反馈。洞悉工作目标，根据使用流程拆解明确的子目标，让每个交互行为都围绕着主目标的达成；为每个行为辅以恰当、即时的反馈，让用户对操作结果了然于胸。此外，可通过情感化设计，适度安抚用户负面情感，强化用户正面情感。

• 过程的意义：调整不同场景下的工作难度，让功能适时适地触发，以匹配用户能力；不分散用户注意力，让用户专注于任务达成，而非界面。让当下的工作既不过于简单，亦不过于复杂，并随着用户能力的成长提出更高的挑战，能让用户持续沉浸在工作的心流中，获得富有成就感的工作体验。

      生长性      

设计者应为自己创造的产品负责，提升功能、价值的可发展性。Ant Design用发展的眼光做设计，充分考虑人、机两端的共同生长。

• 价值连接：产品的增长依赖于用户的群体扩大和深度使用，而用户的成长又依赖于产品功能的壮大。设计者应建立系统设计思维，洞悉产品功能的价值，探索用户在不同场景下的需求，在价值和需求间建立连接。让产品价值被发现，帮助用户建立更有效、更高效的工作方式。

• 人机共生：产品功能和用户需求的更多连接，让人机互动更加紧密，用户和系统共生。产品设计时，不应将用户和系统独立开来，应作为一个动态发展的共同体来思考，确保其足够的灵活、包容，充满生命力。

   Ant Design的产品体系和逻辑日益完善，有很多内容值得学习和借鉴。由于篇幅所限，关于Ant Design更多详细内容，会在日后为大家推送，欢迎关注。

本文图片及内容参考来源：

https://ant.design/docs/spec/introduce-cn 

https://zhuanlan.zhihu.com/p/103016912 Ant Design4.0:创造快乐工作

http://dwbbb.com/blog/MaterialDesignAntDesign/  漫谈 Material Design&Ant Design

- END -

关注「长弓小子」公众号

欢迎「留言」共同切磋

一起追逐更优秀的自己